<template>
  <div class="app-container" v-loading="loading">

    <div v-if="processVarsList.length > 0" style="width: 100%;">
      <el-row :gutter="20" v-for="item in processVarsList" style="background: #eee;margin-bottom: 10px;">
        <el-col :span="6">
          <h4 style="font-weight: bold;">{{item.name}}:</h4>
        </el-col>
        <el-col :span="18">
          <el-scrollbar style="min-height: 20px; max-height: 200px;">
            <pre>
{{ item.value }}
            </pre>
          </el-scrollbar>
        </el-col>
      </el-row>

    </div>
    <el-empty v-else description="暂无数据！" />
  </div>
</template>

<script setup name="ApproveHistory">
import {getVariablesByProcessInstanceId} from "@/api/flowable/bpmn/modelInfo";

// 遮罩层
const loading = ref(true);

// 数据
const processVarsList = ref([]);

const props = defineProps({
  procInstId: ''
})

watch(() => props.procInstId, val => {
  val && getList(val);
}, {immediate: true});

/** 查询列表 */
function getList(processInstanceId) {
  loading.value = true;
  getVariablesByProcessInstanceId({procInstId: processInstanceId}).then(response => {
    processVarsList.value = response.data;
    loading.value = false;
  }).catch(e=>{
    loading.value = false;
  });
}


</script>
